<template>
    <div class="login-container">
        <el-form :model="user" :rules="formRule" class="login-form" ref="form">
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="user.mobile" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
                <el-input v-model="user.code" placeholder="请输入验证码"></el-input>
            </el-form-item>
            <el-form-item prop="agree">
                <el-checkbox v-model="user.agree">我已阅读并同意协议</el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button class="login-btn" type="primary" @click="onLogin" :loading="loginLoad">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import { login } from '@/api/user/'
    export default {
        name: "index",
        data() {
            return {
                user : {
                    mobile:'',
                    code: '',
                    agree: false
                },
                loginLoad: false,
                formRule: {// 表单验证规则
                    mobile: [
                        {required: true, message: '手机号不能为空', trigger: 'change'},
                        {pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的手机号',trigger: 'change'}
                    ],
                    code: [
                        {required: true, message: '验证码不能为空', trigger: 'change'},
                        {pattern: /^\d{6}$/, message: '请输入正确的验证码',trigger: 'change'}
                    ],
                    agree: [
                        {
                            validator: (rule, value, callback) => {
                            if (value) {
                                callback()
                            } else {
                                callback(new Error('请勾选同意用户协议'))
                            }
                            },
                            trigger: 'change'
                        },
                    ]
                }
            }
        },
        methods: {
            login() {
                this.loginLoad = true
                login(this.user).then(response => {
                    this.$message({
                        message:'登录成功',
                        type:'success'
                    })
                    this.loginLoad = false

                    //将接口返回的用户相关数据放在本地存储
                    window.localStorage.setItem('user', JSON.stringify(response.data.data))

                    //跳转到首页
                    this.$router.push('/')
                }).catch(err => {
                    this.$message.error('登录失败，手机或验证码错误')
                    this.loginLoad = false
                })
            },
            onLogin() {
                // 表单验证
                this.$refs['form'].validate(valid => {
                    if(!valid) {
                        return
                    }
                    this.login()
                })
            }
        }
    }
</script>

<style scoped>
    .login-container{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url("./login.jpg") no-repeat;
        background-size: cover;
    }
    .login-form{
        background-color: #fff;
        padding: 50px;
        min-width: 300px;
    }
    .login-btn{
        width: 100%;
    }

</style>